<template>
    <div class="container">
        <div  v-for="(item, index) in demos" class="grid">
        <el-row>
            <el-col :span="24"> 
                <el-button class="btn"  @click="gotoDemos(item)">{{item.name}}:</el-button>
                <div  class="des">{{item.desc}}</div>
            </el-col>
        </el-row>
    </div>

    </div>

</template>
<script>
export default {
    data() {
        return {
            demos: [{
                name: '空白球',
                path: 'default',
                desc: '空白的cesium'
            },{
                name: '昼夜交替',
                path: 'lighting',
                desc: '开启昼夜交替，并且能快速演变昼夜交替'
            },{
                name: '影像图层',
                path: 'imagelayer',
                desc: '影像图层,图层切换未解决'
            },{
                name:'标绘',
                path:'plot',
                desc:'三维标绘'

            }]

        }
    },
    methods: {
        gotoDemos(data) {
            this.$router.push({ name: data.path })
        }

    }
}
</script>
<style scoped>
.grid{
    margin-bottom: 10px;
}
.btn{
    float: left;
    border: none;
    background-color: antiquewhite;
}
.des{
    float: left;
    margin-left: 20px;
    line-height: 40px;
}
</style>